<template>
  <div>
    <div class="search-bar">
      <div class="search-content">
        <input type="text" value="搜索您想要的商品" class="search-text" />
        <button class="search">搜索</button>
      </div>
    </div>
    <!--主体-->
    <div class="view-content">
      <!--顶部轮播-->
      <div class="swiper-ad ">
        <div class="swiper-wrapper">
          <div
            class="swiper-slide"
            v-for="(ad,adIndex) in adList"
            :key="adIndex"
            @click="to('goodsThis')"
          >
            <img :src="ad.imgurl" />
          </div>
        </div>
      </div>
      <!--图标分类-->
      <div class="home-iconlist-box">
        <div class="home-flex__item">
          <div class="home-links-iconlist">
            <div class="img"><img src="../assets/home/icon-link1.png" /></div>
            <p>精选推荐</p>
          </div>
        </div>
        <div class="home-flex__item">
          <div class="home-links-iconlist">
            <div class="img"><img src="../assets/home/icon-link2.png" /></div>
            <p>酒水专场</p>
          </div>
        </div>
        <div class="home-flex__item" @click="to('orderManage')">
          <div class="home-links-iconlist">
            <div class="img"><img src="../assets/home/icon-link3.png" /></div>
            <p>订单管理</p>
          </div>
        </div>
        <div class="home-flex__item">
          <div class="home-links-iconlist">
            <div class="img"><img src="../assets/home/icon-link4.png" /></div>
            <p>商家入驻</p>
          </div>
        </div>
      </div>
      <!--新闻切换-->
      <div class="wy-ind-news">
        <i class="news-icon-laba"></i>
        <div class="swiper-news">
          <div class="swiper-wrapper">
            <div
              class="swiper-slide"
              v-for="(news,newsIndex) in newsList"
              :key="newsIndex"
            >
              {{ news.title }}
            </div>
          </div>
        </div>
      </div>
      <!--精选推荐-->
      <div class="wy-Module">
        <div class="wy-Module-tit"><span>精选推荐</span></div>
        <div class="wy-Module-con">
          <div class="swiper-jingxuan">
            <div class="swiper-wrapper">
              <div
                class="swiper-slide"
                v-for="(goods,goodsIndex) in goodsList"
                :key="goodsIndex"
                @click="to('goodsThis')"
              >
                <img class="img-jingxuan" :src="goods.goodsImg1" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--专场-->
      <div class="wy-Module">
        <div class="wy-Module-tit"><span>酒水推荐</span></div>
        <div class="wy-Module-con">
          <div class="swiper-special">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan1.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan2.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan3.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan4.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan5.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan1.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan1.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan2.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan3.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan4.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan5.jpg"
                /></a>
              </div>
              <div class="swiper-slide">
                <a href="pro_info.html"
                  ><img class="img-jingxuan" src="../assets/home/jingxuan1.jpg"
                /></a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!--猜你喜欢-->
      <div class="wy-Module">
        <div class="wy-Module-tit-line"><span>猜你喜欢</span></div>
        <goods></goods>
      </div>
    </div>
  </div>
</template>
<style scoped>
  @import "../css/style.css";
  .swiper-ad,
  .swiper-news {
    width: 100%;
    height: 10rem;
    overflow: hidden;
  }
  .swiper-ad img {
    width: 100%;
    height: 10rem;
  }
  .home-iconlist-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
  }
  .home-links-iconlist {
    display: block;
    text-align: center;
    margin: 0.625rem 0;
  }
  .img img {
    width: 2.44rem;
    height: 2.44rem;
  }
  .home-links-iconlist p {
    font-size: 0.6875rem;
    color: #454545;
    margin-top: 0.3125rem;
  }
  .wy-ind-news {
    padding: 0.625rem 2.5rem;
    height: 1.125rem;
    line-height: 1.125rem;
    overflow: hidden;
    background: #fff;
    border-top: 0.0625rem solid #e9e9e9;
    border-bottom: 0.0625rem solid #e9e9e9;
    font-size: 0.75rem;
    position: relative;
  }
  .news-icon-laba {
    width: 1.125rem;
    height: 1.125rem;
    display: inline-block;
    position: absolute;
    left: 0.625rem;
    top: 0.625rem;
    background: url(../assets/home/news-icon.png) no-repeat;
    background-size: 1.125rem;
  }
  .wy-ind-news a {
    color: #888;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
  }
  .wy-ind-news a.newsmore {
    display: block;
    width: 40px;
    height: 34px;
    position: absolute;
    right: 0;
    top: 0;
  }
  .news-icon-more {
    width: 1.125rem;
    height: 1.125rem;
    display: inline-block;
    position: absolute;
    background: url(../assets/home/icon-more.png) no-repeat;
    background-size: 1.125rem;
  }
  .wy-Module {
    margin: 0;
    position: relative;
  }
  .wy-Module-tit {
    padding: 0.5rem 0;
    line-height: 1.125rem;
    position: absolute;
    width: 100%;
    text-align: left;
  }
  .wy-Module-tit span {
    font-size: 0.75rem;
    font-weight: bold;
    color: #333;
    padding-left: 0.625rem;
    line-height: 1.125rem;
  }
  .swiper-jingxuan,
  .swiper-special {
    overflow: hidden;
    padding-top: 2.125rem;
  }
  .img-jingxuan {
    width: 7.41rem;
    height: 8.125rem;
  }
  .wy-Module-tit-line {
    padding: 0.625rem;
    line-height: 1.125rem;
  }
  .wy-Module-tit-line span {
    font-size: 0.75rem;
    color: #333;
    position: relative;
  }
  .wy-Module-tit-line span:before {
    position: absolute;
    left: -1.25rem;
    top: 0.375rem;
    height: 0.125rem;
    width: 0.625rem;
    background: #e21323;
    content: "";
  }
  .wy-Module-tit-line span:after {
    position: absolute;
    right: -1.25rem;
    top: 0.375rem;
    height: 0.125rem;
    width: 0.625rem;
    background: #e21323;
    content: "";
  }
</style>
<script>
  import Swiper from "swiper";
  import goods from "../components/goods";
  export default {
    data() {
      return {
        adList: [],
        newsList: [],
        goodsList: [
          {
            goodsImg: require("../assets/home/jingxuan1.jpg")
          },
          {
            goodsImg: require("../assets/home/jingxuan2.jpg")
          },
          {
            goodsImg: require("../assets/home/jingxuan3.jpg")
          },
          {
            goodsImg: require("../assets/home/jingxuan4.jpg")
          },
          {
            goodsImg: require("../assets/home/jingxuan5.jpg")
          }
        ]
      };
    },
    components: {
      goods
    },

    mounted() {
      this.getAdList();
      this.getNewsList();
    },
    methods: {
      to(page) {
        this.$router.push({
          name: page
        });
      },
      getAdList() {
        this.$fetch("/home/getAdList?type=2").then(response => {
          if (response.status == 0) {
            this.adList = response.data.adList;
            this.$nextTick(() => {
              // 下一个UI帧再初始化swiper
              var adSwiper = new Swiper(".swiper-ad", {
                autoplay: true,
                loop: true,
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true //修改swiper的父元素时，自动初始化swiper
              });
            });
          }
        });
      },
      getNewsList() {
        this.$fetch("/home/getNewsList").then(response => {
          if (response.status == 0) {
            this.newsList = response.data.newsList;
            this.$nextTick(() => {
              // 下一个UI帧再初始化swiper
              var newsSwiper = new Swiper(".swiper-news", {
                autoplay: true,
                loop: true,
                direction: "vertical",
                observer: true, //修改swiper自己或子元素时，自动初始化swiper
                observeParents: true //修改swiper的父元素时，自动初始化swiper
              });
            });
          }
        });
      }
    }
  };
</script>
